<template>
  <div class="article-form form-contain">
    <div class="article-state">
      <!-- 切换列表 -->
      <el-radio-group v-model="radio1">
        <el-radio-button label="出售中"></el-radio-button>
        <el-radio-button label="仓库中"></el-radio-button>
      </el-radio-group>
    </div>
    <div class='article-box'>
      <div class='article-content'>
        <!-- 跳转详情 -->
        <div class='article-head'>
          <el-button type="primary">发布商品</el-button>
        </div>
        <!-- 筛选 -->
        <div class='article-select'>
          <span class='shop'>商品名称 :</span>
          <el-input
            v-model="input1"
            clearable
            class='my-btn'>
          </el-input>
          <span class='shop'>商品分类 :</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span class='shop'>商品分组 :</span>
          <el-select v-model="value2" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <div class="select-box">
            <el-button type="primary" size="small">筛选</el-button>
            <span>清空筛选条件</span>
          </div>
        </div>
        <!-- 列表 -->
        <div class="article-table">
          <el-table
            fixed
            ref="multipleTable"
            :data="tableData3"
            tooltip-effect="dark"
            style="width: 100%"
            header-row-class-name='sss'
            @selection-change="handleSelectionChange"
            v-loading.body="listLoading"
            element-loading-text="拼命加载中">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              label="商品名称"
              width="500"
              show-overflow-tooltip>
              <template slot-scope="scope1">
                <img src="../../assets/logo.png" alt="" srcset="" class="table-img">
                <span class="table-msg">商品名称 : {{scope1.row.name}}</span>
                <span class="table-msg">商品编号 : {{scope1.row.number}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="price"
              label="价格"
              width="120">
            </el-table-column>
            <el-table-column
              prop="date"
              label="创建时间"
              width="220"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="stock"
              label="可售库存">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px">
            <el-button @click="toggleSelection(tableData3)">全选</el-button>
            <!-- <el-button @click="toggleSelection()">取消选择</el-button> -->
            <el-button @click="modifiedGrouping()">改分组</el-button>
            <el-button @click="shelves()">上架</el-button>
            <el-button @click="deletes()">删除</el-button>
          </div>
        </div>
        <!-- 分页 -->
        <div class='pagination-box'>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-size="4"
            layout="prev, pager, next, total, jumper"
            :total="100">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import Editor from '@/components/Editor'
// import ImgUpload from '@/components/ImgUpload'
// import Cascader from '@/components/Cascader'

export default {
  // components: {
  //   Editor,
  //   Cascader,
  //   ImgUpload
  // },
  data () {
    return {
      radio1: '出售中',
      input1: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      options2: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value2: '',
      tableData3: [{
        date: '2016-05-03',
        name: '王小虎',
        price: 100,
        stock: 200,
        number: 'p000001'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        price: 100,
        stock: 200,
        number: 'p000001'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        price: 100,
        stock: 200,
        number: 'p000001'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        price: 100,
        stock: 200,
        number: 'p000001'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        price: 100,
        stock: 200,
        number: 'p000001'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        price: 100,
        stock: 200,
        number: 'p000001'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        price: 100,
        stock: 200,
        number: 'p000001'
      }],
      multipleSelection: [],
      currentPage4: 1,
      listLoading: true
    }
  },
  methods: {
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    modifiedGrouping () {

    },
    shelves () {

    },
    deletes () {
      if (this.multipleSelection.length === 0) {
        this.$message({
          message: '请选择订单',
          type: 'warning'
        })
      } else {
        this.$confirm('此操作将删除订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '订单已删除!'
          })
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '操作失败'
          // })
        })
      }
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  },
  mounted () {
    setTimeout(() => {
      this.listLoading = false
    }, 1000)
  }
}
</script>

<style lang='less'>
  .article-form{
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    .el-select{
      width: 20%;
    }
    .article-state{
      margin-left: 40px
    }
    .article-box{
      .article-content{
        width: 95%;
        background: #ffffff;
        .article-head{
          margin-bottom: 40px;
        }
        .article-select{
          margin-bottom: 30px;
          .el-input{
            margin-left: 10px
          }
          .my-btn{
            width: 10%;
            margin-left: 10px
          }
          .shop{
            margin-left: 40px;
          }
          .select-box{
            width:50%;
            margin-left: 60px;
            margin-top: 30px;
            >span{
              display: inline-block;
              margin-left: 10px;
              color: #3f76b5;
              cursor: pointer;
            }
          }
        }
        .article-table{
          width: 95%;
          min-height: 600px;
          .table-img{
            height: 71px;
            width: 60px;
            float: left;
          }
          .table-msg{
            display: block;
            line-height: 30px;
            margin-left: 80px;
          }
        }
        .pagination-box{
          width: 90%;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
</style>
